https://codepen.io/hereiscasio/pen/gOYVXVy
為什麼說這個 Toolbar 特效很難?難就難在如何以既有的 Vuetify 元件達到這種效果,而不是自己加一堆客製化 CSS( 那樣就沒什麼好說了 ),這個 Toolbar 特效在處理上之所以麻煩,原因是往上滑動時,要求不讓整個 Toolbar 都消失,而是留下一部分,為了達到這個目的,就不適合使用 app 搭配 v-content 了,因為這兩個東西搭在一起時,無法做到對彼此位置的動態調整
什麼意思呢?因為我們需要在滾動時,Toolbar 與其下方內容的相對位置仍然保持跟沒滾動前的狀態是一樣的。好在 Toolbar 有個屬性 hide-on-scroll
可以做到在滾動後,還會留下 Toolbar 的一部分,而這部分被稱為 extension。此外,為了達到這個特效,不能再使用 <v-app-bar-nav-icon>
和 <v-toolbar-title>
,原因無它,就是你若真用這兩個標籤,我想是不可能達到目的的,至少會付出很多代價( i.e. 客製化一堆 CSS )